<!-- 卡券充值 -->
<template>
    <div>
        <van-nav-bar title="会员卡券" left-arrow :border="false" @click-left="onClickLeft"/>
        <!-- 充值渠道 -->
        <div class="content flex justifyBetween" v-if="productList.length > 0">
            <div @click="selProduct(item)" class="productItem flex flexColumn justifyCenter" v-for="item in productList" :key="item.id">
                <img :src="item.imageUrl" alt="">
                <div class="productName">{{item.productName}}</div>
                <div class="productPrice">￥{{item.price}}<span class="facePrice">￥{{item.facePrice}}</span></div>
            </div>
        </div>
        <van-empty v-else description="暂无数据" />
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue'
import { Field , CellGroup , NavBar , Empty } from 'vant';
import storage from 'store';
import { BRANDID } from '@/utils/types';
export default {
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [NavBar.name]: NavBar,
        [Empty.name]: Empty,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 返回上一页
        const onClickLeft = () => history.back();

        const getConfig = () =>{
            let url = window.location.href.split('#')[0]
            // var url = 'https://szk.lexiangaysh.cn/'
            proxy.$http.externalApi.queryWxConfig(url,storage.get(BRANDID))
            .then(res=>{
                if(res.success){
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: appId, // 必填，公众号的唯一标识
                        timestamp: Number(res.data.timestamp), // 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                        signature: res.data.signature,// 必填，签名
                        jsApiList: ['updateAppMessageShareData','chooseWXPay'], // 必填，需要使用的JS接口列表
                    })
                }
            })
        }
        // 商户号
        const merchantNo = storage.get('merchantNo');
        // 版本信息
        const edition = '1';
        // 运营商（默认）
        const operator = ref('0');
        const brandId = storage.get(BRANDID)

        // 获取充值产品
        const productList = ref([]);
        const getProduct = () =>{
            proxy.$http.externalApi.newQueryExternalReleaseProductInfo({merchantNo: merchantNo,edition: edition,operator: operator.value,classificationId: 5,province: '0'})
            .then(async res=>{
                if(res.success){
                    let list = [];
                    for(let i = 0; i < res.data.length; i++){
                        var img = await getProductPicture(res.data[i].productId,'0');
                        var obj = res.data[i];
                        obj.imageUrl = img;
                        list.push(obj);
                    }
                    productList.value = list;
                    console.log(productList.value,'productList')
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        getProduct();

        // 获取产品图片
        const getProductPicture = (productId,type) => {
            return new Promise((resolve,reject) => {
                proxy.$http.externalApi.getProductPicture({brandId: brandId,productId: productId,type: type})
                .then(res => {
                    if(res.success){
                        if(res.data.length > 0){
                            resolve(res.data[0].imageUrl)
                        }else{
                            resolve()
                        }
                    }else{
                        reject(res.errMessage)
                    }
                })
                .catch(err => {
                    reject(err)
                })
            })
        }

        // 跳转详情
        const selProduct = async (item) => {
            var detailPicture = await getProductPicture(item.productId,'1')
            item.detailPicture = detailPicture;
            proxy.$router.push({name: 'cardCouponDetail', params: {item: JSON.stringify(item)}})
        }

        return {
            onClickLeft,
            productList,
            selProduct,
        }
    }
}

</script>
<style scoped>
.content{
    margin: 0 15px;
    flex-wrap: wrap;
}
.productItem{
    width: 165.5px;
    margin: 10px 0;
    background: #FFFFFF;
    border-radius: 8px;
    padding-bottom: 10px;
    overflow: hidden;
}
.productItem>img{
    width: 100%;
    height: 128px;
}
.productName{
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin: 12px 10px 5px;
}
.productPrice{
    font-size: 14px;
    color: #FF1839;
    font-weight: 500;
    margin-left: 14px;
}
.productPrice .facePrice{
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
    text-decoration: line-through;
}
</style>